import React, { PureComponent } from 'react';
import UserCenterFloat from '../../components/user_center_float/index';
import { connect } from 'dva';
import { history } from 'umi';
import * as api from '@/services/api';
import { List, Accordion } from 'antd-mobile';

// @ts-ignore
@connect(({ global, central, user }) => ({ global, central, user }))
export default class UserCentral extends PureComponent {
  state= {
    flag: true,
    img: ''
  };
  onChange = () => {
    if (this.state.flag) {
      api.getQR({id: localStorage.getItem('routeId')}).then(res => {
        this.setState({
          flag: false,
          img: res.data
        })
      })
    }
  };
  constructor(props: any) {
    super(props);
    // @ts-ignore
    this.props.dispatch({
      type: 'user/getUserInfo'
    })
  }

  render(): any {
    return (
      <div style={{ height: '100%', width: '100%' }}>
        <UserCenterFloat />
        <div style={{ width: '100%', height: '30%' }}>
          <img
            src={
              'https://c-ssl.duitang.com/uploads/item/201806/12/20180612132009_WRXsQ.jpeg'
            }
          />
        </div>
        <div style={{ width: '100%', height: '30%' }}>
          <List>
            <List.Item
              arrow="horizontal"
              multipleLine
              onClick={() => {
                history.push('/my_publish');
              }}
            >
              我的发布
            </List.Item>
          </List>
          <List>
            <Accordion className="my-accordion" onChange={this.onChange}>
              <Accordion.Panel header="我的二维码">
                <List className="my-list">
                  <List.Item>
                    <div style={{ width: '100%', height: '30%' }}>
                      <img style={{ width: '100%', height: '30%' }}
                        src={
                          'data:image/jpeg;base64,' + this.state.img
                        }
                      />
                    </div>
                  </List.Item>
                </List>
              </Accordion.Panel>
            </Accordion>
          </List>
        </div>
        <div style={{ width: '100%', height: '30%' }}></div>
      </div>
    );
  }
}
